<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-date"></i> 表单</el-breadcrumb-item>
                <el-breadcrumb-item>编辑器</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div style="height: 15px;">

        </div>
        <quill-editor ref="myTextEditor" v-model="content_defaultValue" :options="editorOption"  @focus="onEditorFocus($event)" @change="onEditorChange($event)">
          <div id="editorAb" slot="toolbar">

            <span class="ql-formats"><button type="button" class="ql-bold"></button></span>
            <span class="ql-formats"><button type="button" class="ql-italic"></button></span>
            <span class="ql-formats"><button type="button" class="ql-underline"></button></span>
            <span class="ql-formats"><button type="button" class="ql-strike"></button></span>
            <span class="ql-formats"><button type="button" class="ql-blockquote"></button></span>
            <span class="ql-formats"><button type="button" class="ql-code-block"></button></span>
            <span class="ql-formats"><button type="button" class="ql-header" value="1"></button></span>
            <span class="ql-formats"><button type="button" class="ql-header" value="2"></button></span>
            <span class="ql-formats"><button type="button" class="ql-list" value="ordered"></button></span>
            <span class="ql-formats"><button type="button" class="ql-list" value="bullet"></button></span>
            <span class="ql-formats"><button type="button" class="ql-script" value="sub"></button></span>
            <span class="ql-formats"><button type="button" class="ql-script" value="super"></button></span>
            <span class="ql-formats"><button type="button" class="ql-indent" value="-1"></button></span>
            <span class="ql-formats"><button type="button" class="ql-indent" value="+1"></button></span>
            <span class="ql-formats"> <button type="button" class="ql-direction" value="rtl"></button></span>
            <span class="ql-formats"><select class="ql-size">
              <option value="small"></option>
              <option selected=""></option>
              <option value="large"></option>
              <option value="huge"></option>
            </select></span>
            <span class="ql-formats"><select class="ql-header">
              <option value="1"></option>
              <option value="2"></option>
              <option value="3"></option>
              <option value="4"></option>
              <option value="5"></option>
              <option value="6"></option>
              <option selected="selected"></option>
            </select></span>
            <span class="ql-formats"><select class="ql-color">
              <option selected="selected"></option>
              <option value="#e60000"></option>
              <option value="#ff9900"></option>
              <option value="#ffff00"></option>
              <option value="#008a00"></option>
              <option value="#0066cc"></option>
              <option value="#9933ff"></option>
              <option value="#ffffff"></option>
              <option value="#facccc"></option>
              <option value="#ffebcc"></option>
              <option value="#ffffcc"></option>
              <option value="#cce8cc"></option>
              <option value="#cce0f5"></option>
              <option value="#ebd6ff"></option>
              <option value="#bbbbbb"></option>
              <option value="#f06666"></option>
              <option value="#ffc266"></option>
              <option value="#ffff66"></option>
              <option value="#66b966"></option>
              <option value="#66a3e0"></option>
              <option value="#c285ff"></option>
              <option value="#888888"></option>
              <option value="#a10000"></option>
              <option value="#b26b00"></option>
              <option value="#b2b200"></option>
              <option value="#006100"></option>
              <option value="#0047b2"></option>
              <option value="#6b24b2"></option>
              <option value="#444444"></option>
              <option value="#5c0000"></option>
              <option value="#663d00"></option>
              <option value="#666600"></option>
              <option value="#003700"></option>
              <option value="#002966"></option>
              <option value="#3d1466"></option>
            </select></span>
            <span class="ql-formats"> <select class="ql-background">
              <option value="#000000"></option>
              <option value="#e60000"></option>
              <option value="#ff9900"></option>
              <option value="#ffff00"></option>
              <option value="#008a00"></option>
              <option value="#0066cc"></option>
              <option value="#9933ff"></option>
              <option selected="selected"></option>
              <option value="#facccc"></option>
              <option value="#ffebcc"></option>
              <option value="#ffffcc"></option>
              <option value="#cce8cc"></option>
              <option value="#cce0f5"></option>
              <option value="#ebd6ff"></option>
              <option value="#bbbbbb"></option>
              <option value="#f06666"></option>
              <option value="#ffc266"></option>
              <option value="#ffff66"></option>
              <option value="#66b966"></option>
              <option value="#66a3e0"></option>
              <option value="#c285ff"></option>
              <option value="#888888"></option>
              <option value="#a10000"></option>
              <option value="#b26b00"></option>
              <option value="#b2b200"></option>
              <option value="#006100"></option>
              <option value="#0047b2"></option>
              <option value="#6b24b2"></option>
              <option value="#444444"></option>
              <option value="#5c0000"></option>
              <option value="#663d00"></option>
              <option value="#666600"></option>
              <option value="#003700"></option>
              <option value="#002966"></option>
              <option value="#3d1466"></option>
            </select></span>
            <span class="ql-formats"><select class="ql-font">
              <option selected="selected"></option>
              <option value="serif"></option>
              <option value="monospace"></option>
            </select></span>
            <span class="ql-formats">
              <select class="ql-align">
              <option selected="selected"></option>
              <option value="center"></option>
              <option value="right"></option>
              <option value="justify"></option>
            </select>
            </span>
            <span class="ql-formats"><button type="button" class="ql-clean"></button></span>
            <span class="ql-formats"><button type="button" class="ql-link"></button></span>
            <span class="ql-formats"><button type="button" class="ql-video"></button></span>
            <!--图片按钮点击事件-->
            <button type="button" @click="customButtonClick">img</button>
            <input type="file"  class="custom-input" @change='upload' style='display: none !important;'>
          </div>
        </quill-editor>
    </div>
</template>
<script>
  import Common from './js/Common';
  import func from '../../utils/func/func.js';
  import plugins from '../../register/plugin.js'
  import   { Quill } from 'vue-quill-editor';
  import  { quillEditor } from 'vue-quill-editor';
  import "quill/dist/quill.core.css";
  import "quill/dist/quill.snow.css";
  import "quill/dist/quill.bubble.css";
  import store from 'store/'
  import { ImageResize } from '../../../static/modules/ImageResize.js';
  Quill.register('modules/imageResize', ImageResize);
  
  export default {
    name: 'vue-editor',
    mixins:[Common],
    data () {
      return {
        defaultProps: {
          children: 'child',
          label: 'title',
          value: 'id',
        },
        editorOption: {
          modules: {
            toolbar: '#editorAb',
            imageResize: {
               displaySize: true
            },
          },
        },
        content:{},
        image_array:[],
        content_defaultValue:''

      }
    },
    components: {
        quillEditor
    },
    computed: {
      editor: {
        get: function () {
          const self = this;
          return self.$refs.myTextEditor.quill;
        },
        set: function (newValue) {
          const self = this;
          self.$refs.myTextEditor.quill = newValue;
        }
      }

    },
    created () {
      this.init();
    },
    mounted () {
    },
    watch:{

      content(val) {
        const self = this;
        self.$emit('contentsave',self.content);
      },
      defaultValue(val) {
        const self = this;
        self.content_defaultValue = this.defaultValue;
      },

    },
    methods: {

      init(){
        const self = this;
        self.content_defaultValue = this.defaultValue;
        console.log('init-self.idArr',self.idArr)
      },

      onEditorChange({quill, html, text ,iamge }) {
        const self = this;
        self.content = html;
        this.$emit('onChange', {field:self.field,value:html})
      },


      getIdArrByHtml(html){
        const self = this;
        var imgReg = /<img.*?(?:>|\/>)/gi;
        var srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i;
        var imgIdReg = /id(\S*)\./i;
        var arr = html.match(imgReg);
        if(!arr){
          arr = [];
        };
        var idArr = [];
        for(var i=0;i<arr.length;i++){
          idArr.push(arr[i].match(imgIdReg)[1]);
        };
        return idArr;
      },


      onEditorFocus(editor) {
        const self = this;
        self.editor = editor   //当content获取到焦点的时候就 存储editor
      },

      customButtonClick(){
        const self = this;
        var range
        if (self.editor.getSelection() != null) {
          range = self.editor.getSelection()
          self.length = range.index  //content获取到焦点，计算光标所在位置，目的为了在该位置插入img
        } else {
          self.length = self.content.length  //content没有获取到焦点时候 目的是为了在content末尾插入img
        }
        self.$el.querySelector('.custom-input').click();   //打开file 选择图片
      },


      async upload(e){

        const self = this;
        let file = e.target.files[0];
        var obj = file.name.lastIndexOf(".");
        var ext = file.name.substr(obj+1);
        let param = new FormData()  // 创建form对象

        param.append('file', file, file.name)  // 通过append向form对象添加数据
        param.append('token', store.getters.getToken);
        param.append('ext', ext);
        param.append('md5', 'md5');

        param.append('totalSize',file.size);
        param.append('start',0);
        param.append('chunkSize',file.size);
        param.append('originName',file.name);
        // POST表单数据
        //param.append('chunk', '0') // 添加form表单中其他数据
        //console.log(param.get('file'))  FormData私有类对象，访问不到，可以通过get判断值是否传进去
        let config = {
          headers: {'Content-Type': 'multipart/form-data'}
        }
        //console.log(param.get('file'));
        var res = await self.$$api_uploadImg({data: param,headers: {'Content-Type': 'multipart/form-data'}});
        if(res.solely_code == 100000){

          self.contentImg = res.info.url ;    //获取到了图片的URL

          //判断文件类型渲染(H5 video标签只支持H264编码的MP4)
          var videoArray = ['mp4'];
          var url = res.info.url;
          
          var obj = url.lastIndexOf(".");
          var ext = url.substr(obj+1);
          if(videoArray.indexOf(ext)!=-1){
            self.editor.insertEmbed(self.length, 'video', self.contentImg);
          }else{
            self.editor.insertEmbed(self.length, 'image', self.contentImg)
          };
          var jqObj=self.$el.querySelector('.custom-input');
          jqObj.value = "";

        }
      },







      /**
       * 根据数组的长度，来决定需要递归几次，最终取出需要的结果，我曹，没法解释，解释不清的玩意。
       * @param  {array}  areas 地区列表，无线分类结构
       * @param  {array}  temps 一维数组,如果只有一个，代表取顶级;如果两个，取顶级的子级；如果三个，顶级的子级的子级....以此类推
       * @param  {number} k     递归次数，当这个值等于temps的长度时，就代表结束了
       * @return {string}       地区名称
       */
      onDeepGetCityName (list, temps, k) {
        for (var i = 0; i < list.length; i++) {
          if (list[i].id + '' === temps[k] + '') {
            if (k < temps.length - 1) {
              k = k + 1
              this.temp_field_obj[this.data.key].push(list[i].city)
              this.onDeepGetCityName(list[i].children, temps, k)
            } else {
              // console.log(list[i]);
              this.temp_field_obj[this.data.key].push(list[i].city)
              return
            }
          }
        }
      },

      /**
       * 最后一级选择完后触发
       * @param v 选中的值数组，根据这个数组取出对应的文本
       */
      sonChange (v) {
        this.temp_field_obj[this.data.key] = []
        this.onDeepGetCityName(this.data.options, v, 0)
        this.submit_info[this.data.key] = this.temp_field_obj[this.data.key]
        this.$emit('onChange', [this.data.key,value])
        this.events.change && this.events.change({value: v, info: this.submit_info[this.data.key]})
      },
      onChange (val) {

        this.$emit('onChange', [this.data.key,val[val.length-1]])

      },

      /**
       * 每选择一项时就触发这个
       * 场景：当选择的条件不允许继续选择时，可以使用这个事件
       * @param v 选中的值数组，根据这个数组取出对应的文本
       */
      onActiveItemChange (v) {
        this.temp_field_obj[this.data.key] = []
        this.onDeepGetCityName(this.data.options, v, 0)
        this.submit_info[this.data.key] = this.temp_field_obj[this.data.key]
        this.events['active-item-change'] && this.events['active-item-change']({
          value: v,
          info: this.submit_info[this.data.key]
        })
      }
    },


  }
</script>
